<template>
    <view>
        <view class="story-main">
            <block v-for="(item, index) in list" :key="index">
                <view @click="goToStory(item)" style="height: 502rpx; position: relative" class="story-item">
                    <view class="story-top">
                        <image :src="item.avatarAbsolute" style="border-radius: 50%; background-color: #eaeaea"></image>
                        <view
                            style="
                                font-size: 28rpx;
                                width: calc(100% - 150rpx);
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 1;
                                overflow: hidden;
                            "
                        >
                            {{ item.userName }}
                        </view>
                    </view>
                    <view class="story-content">{{ item.weightExperience }}</view>
                    <view class="story-img">
                        <view class="story-img-item">
                            <image style="border-radius: 16rpx" :src="item.beforePicAbsolute" mode=""></image>
                            <view class="story-before"
                                ><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/huibefor.png" mode=""></image
                            ></view>
                        </view>

                        <view class="story-img-item">
                            <image
                                style="border-radius: 8rpx; background-color: #eaeaea"
                                :src="item.afterPicAbsolute"
                                mode=""
                            ></image>
                            <view class="story-before"
                                ><image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/huibefor1.png" mode=""></image
                            ></view>
                        </view>
                    </view>
                    <label
                        style="
                            float: left;
                            margin-left: 0rpx;
                            margin-top: 18rpx;
                            color: #999999;
                            font-size: 24rpx;
                            line-height: 34rpx;
                        "
                    >
                        {{ item.submitTime }}
                    </label>
                    <image
                        @click.stop="deleteEvent(index)"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/delete_dynamic.png"
                        style="
                            z-index: 101;
                            position: absolute;
                            top: 18rpx;
                            width: 76rpx;
                            height: 60rpx;
                            left: calc(100% - 76rpx);
                        "
                    ></image>
                    <view v-if="item.delStatus == 1" class="delete_view"
                        ><label class="tag_label">后台已删除</label></view
                    >
                    <view v-if="item.status == 0" class="delete_view"><label class="tag_label">后台已隐藏</label></view>
                </view>
            </block>
        </view>

        <view
            v-if="noData"
            style="display: flex; flex-direction: column; align-items: center; width: 100%; background-color: #f8f8f8"
        >
            <image
                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/comments_null.png"
                style="margin-top: 136rpx; width: 316rpx; height: 316rpx"
            ></image>
            <label style="margin-top: 20rpx; color: #272a37; font-size: 32rpx">暂无故事</label>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            noData: false,
            trendForm: {
                pageNum: 1,
                pageSize: 10,
                orderByColumn: 'top desc ,topTime desc,submitTime',
                isAsc: 'descending',
            },
        };
    },
    onReachBottom() {
        this.trendForm.pageNum = ++this.trendForm.pageNum;
        this.requestMyStorys(false);
    },
    methods: {
        requestMyStorys(isFresh) {
            if (isFresh) {
                this.trendForm.pageNum = 1;
            }
            this.request.httpTokenRequest('/mp-api/wx/story/my', this.trendForm, 'POST', false).then((res) => {
                uni.stopPullDownRefresh();
                if (res.code == 0) {
                    if (res.data.list.length > 0) {
                        this.noData = false;
                        if (isFresh) {
                            this.list = res.data.list;
                        } else {
                            res.data.list.forEach((item) => {
                                this.list.push(item);
                            });
                        }
                    } else if (this.trendForm.pageNum === 1 && res.data.list.length === 0) {
                        this.noData = true;
                    }

                    if (res.data.total > this.list.length) {
                        this.status = 'loadmore';
                        this.more = true;
                    } else {
                        this.more = false;
                        this.status = 'nomore';
                    }
                }
                this.noData = true;
            });
        },
        deleteEvent(index) {
            uni.showModal({
                cancelText: '取消',
                confirmText: '确认',
                title: '确认删除此条故事？',
                success: (res) => {
                    if (res.confirm) {
                        this.request
                            .httpTokenRequest(`/mp-api/wx/story/delete/${this.list[index].id}`, null, 'POST', false)
                            .then((res) => {
                                if (res.code == 0) {
                                    //this.list[index].delStatus = 1
                                    this.list.splice(index, 1);
                                }
                            });
                    }
                },
            });
        },
        goToStory(item) {
            if (item.delStatus == 1) {
                return;
            }
            if (item.templateId == 1) {
                uni.navigateTo({
                    url: `/packageHome/pages/story/storydetail?id=${item.id}`,
                });
            } else if (item.templateId == 2) {
                uni.navigateTo({
                    url: `/packageHome/pages/story/storydetail1?id=${item.id}`,
                });
            }
            // uni.navigateTo({
            // 	url:`/packageHome/pages/story/storydetail?id=${item.id}`
            // })
        },
    },
    onLoad() {
        this.requestMyStorys(true);
    },
    onPullDownRefresh() {
        this.requestMyStorys(true);
    },
};
</script>

<style scoped>
.story-before image {
    width: 70rpx;
    height: 30rpx;
}
.delete_view {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.tag_label {
    background-color: rgba(0, 0, 0, 0.5);
    width: 188rpx;
    height: 56rpx;
    border-radius: 28rpx;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
    line-height: 56rpx;
}
</style>
